<template>
    <div class="wallet">
        <div class="wallet-header">
            <span>{{$t('wallet.totalBalance')}}</span>
            <span class="bold" v-show="loadCompolete && showBalance"><strong>{{totalBalance || 0}}</strong> dlb</span>
            <span class="hide-money" v-show="!showBalance">***</span>
            <i class="iconToggle" :class="showBalance?'icon-hide':'icon-eye'" @click="toggleIcon"></i>
            <div class="refreshbox"><refresh @refreshData="refreshData"></refresh></div>
        </div>
        <el-card class="box-card">
            <el-row :gutter="20" v-show="loadCompolete && walletList.length>0">
                <el-col :span="8" v-for="(item,index) in walletList" :key="index" @click.native="goToDetail(item)">
                    <div class="grid-content">
                        <div class="grid-item">
                            <img class="wallet-icon" :src="require(`./images/Oval1.png`)">
                            <div class="wallet-info">
                                <p class="name">{{item.name}}</p>
                                <p class="i-wallet">
                                    <span>{{item.balance || 0}}</span> dlb
                                </p>
                                <p class="addr">
                                    {{item.publicKey}}
                                </p>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <div class="no-item" v-show="loadCompolete && !walletList.length">
                <div class="inner">
                    <img src="./images/no.png" alt="">
                    <p>{{$t('trade.noWallet')}}</p>
                </div>
            </div>
            <div class="wallet-footer">
                <div class="tab-list">
                    <el-button @click.native="$router.push('/o-wallet-new')" type="default">{{$t('wallet.createWallet')}}</el-button>
                    <el-button @click.native="$router.push('/o-wallet-import')" type="primary">{{$t('wallet.importW')}}</el-button>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
import { mapActions } from 'vuex'
import { showaccount, getBalances} from '../../createAccount'
import refresh from '@/components/refresh/refresh';
export default {
    name: "wallet-list",
    components:{
        refresh
    },
    data() {
        return {
            showBalance: true,
            totalBalance: 0,
            balanceList : [],
            walletList: [],
            loadCompolete: false
        };
    },
    activated(){
        this.fetchData()
    },
    methods: {
        ...mapActions(['updateNodeName']),
        reset(){
            this.showBalance = true;
            this.totalBalance = 0;
            this.balanceList = [];
            this.walletList = [];
            this.loadCompolete = false;
        },
        fetchData(){
            this.reset()
            showaccount((resp)=>{
                // console.log(resp)
                this.walletList = resp
            })
            getBalances((resp)=>{
                // console.log(resp)
                this.balanceList = resp
                this.handleData()
            })
        },
        toggleIcon(){
            this.showBalance = !this.showBalance
        },
        handleData(){
            for( var i = 0; i < this.balanceList.length; i++ ){
                this.totalBalance += Number(this.balanceList[i].balance)
                for( var k = 0; k < this.walletList.length; k++ ){
                    if( this.walletList[k].publicKey == this.balanceList[i].publicKey ){
                        this.walletList[k].balance = this.balanceList[i].balance
                    }
                }
            }
            this.loadCompolete = true
        },
        goToDetail(item){
            this.updateNodeName(item.name)
            this.$router.push({
                path: "/o-wallet-details",
                query:{
                    publicKey: item.publicKey,
                    name: item.name
                }
            });
        },
        refreshData(){
            this.fetchData()
        }
    }
};
</script>

<style lang="less" scoped>
.wallet {
    position:absolute;
    top:60px;
    bottom:22px;
    left:10px;
    right:10px;
    .wallet-header {
        height:40px;
        margin-left:15px;
        position:relative;
        span{
            display: inline-block;
            height:40px;
            line-height: 40px;
            font-size:14px;
            margin-right:15px;
        }
        .refreshbox{
            position: absolute;;
            top:10px;
            right:0;
        }
    }
    .box-card{
        width:100%;
        position: absolute;
        top: 40px;
        bottom: 0;
        .grid-content{
            margin-bottom: 15px;
            border:1px solid transparent;
            &:hover{
                border:1px solid #32C5DD;
                border-radius: 4px;
            }
        }
        .grid-item {
            position: relative;
            background: #ffffff;
            box-shadow: 0px 2px 8px 0px rgba(227,230,244,1);
            border-radius: 4px;
            padding: 10px 10px 20px 10px;
            border: 1px solid transparent;
            cursor: pointer;
            .wallet-icon{
                width: 40px;
                height: 40px;
                position:absolute;
                left:10px;
                top:50%;
                margin-top:-20px;
            }
            .wallet-info {
                width: 100%;
                padding-left:50px;
                .name {
                    color:#1A1A1A;
                    font-weight: 700;
                    font-size: 14px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                .i-wallet {
                    font-size:12px;
                    margin-top:10px;
                    padding-left:25px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    position:relative;
                    span{
                        font-size:14px;
                        font-weight:bold;
                    }
                    &:before{
                        content:'';
                        display:inline-block;
                        width:14px;
                        height:14px;
                        background:url(./images/icon-wallet.png) no-repeat 0 0;
                        background-size:cover;
                        position:absolute;
                        top:50%;
                        left:0;
                        margin-top:-7px;
                    }
                }
                .addr {
                    width:100%;
                    color:#1A1A1A;
                    font-size: 12px;
                    margin-top:10px;
                    padding-left:25px;
                    position:relative;
                    word-break: break-all;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                    &:before{
                        content:'';
                        display:inline-block;
                        width:13px;
                        height:15px;
                        background:url(./images/icon-positioning.png) no-repeat 0 0;
                        background-size:cover;
                        position:absolute;
                        top:3px;
                        left:0;
                    }
                }
            }
        }
        .no-item{
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
            .bg{
                margin: 0 auto;
            }
            p{
                color:#666;
                font-size:12px;
                text-align: center;
            }
        }
        .wallet-footer{
            text-align:center;
            padding-top: 20px;
            border-top: 1px solid #F8F8FE;
            position: absolute;
            bottom: 0;
            left: 20px;
            right: 20px;
            height: 70px;
            background: #fff;
            .tab-list {
                width:300px;
                display: flex;
                justify-content: space-between;
                margin:0 auto;
            }
        }
    }
}
</style>